<template>

   <div>
      <div class="right_content clearfix">
         <!--                <div class="site_top_con">-->
         <!--                    <a @click="show_add">新增收货地址</a>-->
         <!--                    <span>您已创建了<b>{{addresses.length}}</b>个收货地址，最多可创建<b>{{ limit }}</b>个</span>-->
         <!--                </div>-->
         <div>
            <el-button style="background-color: pink; color: #c40000; border: 2px solid #c40000" size="small"
                       @click="dialogFormVisible = true">新增收货地址
            </el-button>
            <span
               style="color: #89c44e">您已创建了<b>{{addresses.length}}</b>个收货地址，最多可创建<b>{{ 5-addresses.length }}</b>个</span>
         </div>
         <div class="site_con" v-for="(address, index) in addresses">
            <div class="site_title">
               <div v-if="is_set_title[index]">
                  <input v-model="input_title" type="text" name="">
                  <input @click="save_title(index)" type="button" name="" value="保 存">
                  <input @click="cancel_title(index)" type="reset" name="" value="取 消">
               </div>
               <div v-else>
                  <h3>{{ address.title }}</h3>
                  <a @click="show_edit_title(index)"></a>
               </div>
               <em v-if="address.id==default_address_id">默认地址</em>
               <span @click="del_address(address.id, index)">×</span>
            </div>
            <ul class="site_list">
               <li><span>收货人：</span><b>{{ address.consignee }}</b></li>
               <li><span>所在地区：</span><b>{{ address.province }} {{address.city}} {{ address.county }}</b></li>
               <li><span>地址：</span><b>{{ address.detail }}</b></li>
               <li><span>手机：</span><b>{{ address.phone }}</b></li>
               <li><span>电子邮箱：</span><b>{{ address.email }}</b></li>
            </ul>
            <div class="down_btn">
               <a v-if="address.id!=default_address_id" @click="set_default(index)">设为默认</a>
               <a @click="show_edit(index)">编辑</a>
            </div>
         </div>
      </div>

      <el-dialog title="新增收货地址" :visible.sync="dialogFormVisible" width="800px">
         <span class="title"></span>
         <el-form :model="form">
            <el-form-item label="*收货人:" :label-width="formLabelWidth">
               <el-input v-model="form.consignee" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="*所在地区:" :label-width="formLabelWidth">
               <el-select v-model="form.province" placeholder="请选择所在省" @change="getCity">
                  <el-option v-for="province in provinceList" :label="province.name" :value="province.id"
                             :key="province.id"></el-option>
               </el-select>
               <el-select v-model="form.city" placeholder="请选择所在市" @change="getCounty">
                  <el-option v-for="city in cityList" :label="city.name" :value="city.id" :key="city.id"></el-option>
               </el-select>
               <el-select v-model="form.county" placeholder="请选择所在区">
                  <el-option v-for="county in countyList" :label="county.name" :value="county.id"
                             :key="county.id"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="*详细地址:" :label-width="formLabelWidth">
               <el-input v-model="form.detail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="*手机号:" :label-width="formLabelWidth">
               <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:" :label-width="formLabelWidth">
               <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click="addform" size="small" style="background-color: red; color: white">保 存</el-button>
            <el-button @click="dialogFormVisible = false" size="small" style="background-color: #c40000; color: white">取
               消
            </el-button>
         </div>
      </el-dialog>
   </div>

</template>

<script>
   export default {
      name: "UserSite",
      data() {
         return {
            dialogFormVisible: false,
            form: {
               consignee: '',
               province: '',
               city: '',
               county: '',
               detail: '',
               phone: '',
               email: '',
            },
            provinceList: [],
            cityList: [],
            countyList: [],
            formLabelWidth: '100px',

            addresses: [],
            is_set_title: [],
            input_title: '',
            default_address_id: '',
         }
      },
      methods: {
         save_title(){},
         cancel_title(){},
         show_edit_title(){},
         del_address(id, index){
            this.$axios({
               url: 'userapp/address/',
               method: 'DELETE',
               params: {
                  id: id,
                  token: sessionStorage.getItem('token')
               },
            }).then(resp=>{
               alert(resp.data.msg);
               if (resp.data.code===200){
                  this.addresses.splice(index,1)
               }
            })
         },
         show_edit(){},
         addform() {
            this.$axios({
               url: 'userapp/address/',
               method: 'POST',
               params: {
                  token: sessionStorage.getItem('token')
               },
               data: this.form
            }).then(resp => {
               alert(resp.data.msg);
               if (resp.data.code === 200) {
                  this.dialogFormVisible = false;
                  this.addresses.push(this.form);
                  this.form = {};
               }
            })
         },
         getAddRess() {
            this.$axios({
               url: 'userapp/address/',
               method: 'GET',
               params: {
                  token: sessionStorage.getItem('token')
               },
            }).then(resp => {
               this.addresses = resp.data
            })
         },
         getProvince() {
            this.$axios({
               url: 'userapp/area/',
               method: 'GET',
            }).then(resp => {
               this.provinceList = resp.data
            })
         },
         getCity(pid) {
            this.$axios({
               url: 'userapp/area/',
               method: 'GET',
               params: {
                  pid: pid
               }
            }).then(resp => {
               this.cityList = resp.data

            })
         },
         getCounty(pid) {
            this.$axios({
               url: 'userapp/area/',
               method: 'GET',
               params: {
                  pid: pid
               }
            }).then(resp => {
               this.countyList = resp.data

            })
         },

      },
      created() {
         this.getProvince();
         this.getAddRess()

      },
      computed: {},
      filters: {},
      watch: {},
   }
</script>

<style scoped>
   .title {
      background-color: red;
      width: 790px;
      height: 55px;
      float: left;
      margin-top: -80px;
      margin-left: -15px;
   }
</style>
